<template>
  <div class="signin">
    <router-link to="/login" class="back">
      <svg class="icon fanhui" aria-hidden="true">
        <use xlink:href="#icon-fanhui"></use>
      </svg>
      <span>返回</span>
    </router-link>
    <div class="input-group">
      <p>通过邮箱注册：</p>
      <input type="text" placeholder="邮箱" class="input-box"
      v-model="mail">
      <input type="password" placeholder="密码" class="input-box"
      v-model="password">
      <button @click="signUp">注册</button>
    </div>
    <p class="find" @click="signIn">已有账号，登陆</p>
  </div>
</template>

<script>
import {register} from '@/api/login'
import {mapState} from 'vuex'

export default {
  name: 'signin',
  data () {
    return {
      mail: '',                          // 注册邮箱
      password: ''                       // 注册密码
    }
  },
  computed: mapState({
    userInfo: state => state.userInfo
  }),                                    // vux中的全局变量userInfo
  methods: {
    signUp () {
      let formData = {
        mail: this.mail,
        password: this.password,
        type: 1
      }
      register(formData).then(
        (data) => {
          if (data.data.code === 200) {
            this.$store.dispatch('showTips', {
              show: true,
              message: '注册成功，马上进入登录页面'
            })
            localStorage.uid = data.data.data
            localStorage.token = data.data.token
            setTimeout(() => {
              this.$router.replace({name: 'signin'})
            }, 1000)
          } else if (data.data.code === 6000) {
            this.$store.dispatch('showTips', {
              show: true,
              message: '邮箱格式不正确'
            })
          } else if (data.data.code === 6001) {
            this.$store.dispatch('showTips', {
              show: true,
              message: '密码长度不足6位'
            })
          } else if (data.data.code === 6008) {
            this.$store.dispatch('showTips', {
              show: true,
              message: '此用户存在'
            })
          } else if (data.data.code === 6016) {
            this.$store.dispatch('showTips', {
              show: true,
              message: '未填写第一套问卷'
            })
          } else if (data.data.code === 6021) {
            this.$store.dispatch('showTips', {
              show: true,
              message: '注册类型不正确'
            })
          }
        }
      )
    },                                   // 注册
    signIn () {
      this.$router.push({name: 'signin'})
    }
  }
}
</script>

<style lang="scss" scoped>
.signin {
  height: 100%;
  width: 100%;
  background-color: #fff;
}
.back {
  display: flex;
  align-items: center;
  padding: 30px 50px;
  color: #61a2e1;
  .fanhui {
    width: 40px;
    height: 40px;
  }
  span {
    font-size: 34px;
  }
}
.input-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  p {
    font-size: 60px;
    color: #999;
    margin: 50px auto;
  }
  .input-box {
    width: 500px;
    height: 100px;
    font-size: 40px;
    color: #ccc;
    margin: 20px auto;
    border: 2px solid #ccc;
    &::-webkit-input-placeholder {
      padding-left: 20px;
      font-size: 40px;
      color: #ccc;
    }
  }
    button {
    width: 500px;
    height: 100px;
    font-size: 40px;
    color: #fff;
    background-color: #999;
    border-radius: 10px;
    margin: 10px auto;
  }
}
.find {
  color: #61a2e1;
  font-size: 36px;
  text-align: end;
  padding-right: 100px;
  padding-top: 20px;
}
</style>
